import React from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, message } from 'antd';


const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
}

// @Form.create()
class ResetPwdModel extends React.Component {
  state = {
    visible:false,
  };
  componentWillMount() {
  }
  formRef = React.createRef();
  componentDidMount() {
    this.props.onRef(this)
  }
  showModal = async (userAccountSid) => {
    await this.setState({
      visible: true,
    });
    this.formRef.current.setFieldsValue({
      userAccountSid: userAccountSid,
      initPassword: Math.random().toString().slice(-6),
    });
  }
  onCancel = () => {
    this.formRef.current.resetFields();
    this.setState({ visible: false });
  }
  handleOk = (e) => {
    const { dispatch } = this.props;
    e.preventDefault();
    this.formRef.current.validateFields().then((values) => {
      
        dispatch({
          type: 'baseUser/resetPassword',
          payload: values,
          callback: (response) => {
            if (response.code === '200') {
              message.success('密码重置成功');
            } else {
              message.error(response.description, 3);
            }
            this.setState({ visible: false });
          },
        });
    });
  }
  saveFormRef = (form) => {
    this.form = form;
  }

  render() {
    // const { form: { getFieldDecorator } } = this.props;
    return (
      <Modal
        visible={this.state.visible}
        title="重置密码"
        onOk={this.handleOk}
        onCancel={this.onCancel}
        width={600}
        okText="提交"
          >
        <Form onSubmit={this.handleSubmit} ref={this.formRef}>
        <FormItem
          {...formItemLayout}
          label="用户账号ID"
          name="userAccountSid"
          rules={[{
            required: true, message: '',
          }]}
        >
          <Input placeholder="" disabled />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="重置后密码"
          name="initPassword"
          rules={[{
            required: true, message: "请输入重置后的密码"
          }]}
        >
          <Input placeholder="" />
        </FormItem>
      </Form>
  </Modal>
    );
  }
}

export default ResetPwdModel;
